<template>
  <div class="CarListInfo">
    <!-- 购物车信息 -->
    <div class="Car_column">
      <!-- 左侧商品选中开关 -->
      <div class="Car_switch">
        <van-checkbox v-model="getcar.checked" checked-color="#D2868E"></van-checkbox>
      </div>
      <!-- 右侧商品内容 -->
      <div class="Car_info">
        <!-- 商品图片 -->
        <div class="Car_img">
          <van-image width="60" height="60" :src="getcar.pic_path" />
        </div>
        <!-- 商品信息 -->
        <div class="Car_title">
          <span>{{ getcar.title }}</span>
          <div class="price">
            <!-- 商品单价 -->
            <h5>￥{{ getcar.price }}</h5>
            <!-- 商品数量 -->
            <van-stepper
              v-model="getcar.count"
              input-width="40px"
              class="van_ste"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    getcar: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      checked: true,
    };
  },
};
</script>

<style lang="less" scoped>
.CarListInfo {
  background-color: #fff;
  height: 80px;
  margin: 0 10px 10px;
  border-radius: 10px;

  // 购物车信息
  .Car_column {
    padding: 0 8px;
    display: flex;

    // 左侧商品选中开关
    .Car_switch {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
    }

    // 右侧商品内容
    .Car_info {
      padding: 5px 0;
      width: 100%;
      display: flex;
      flex-direction: row;
      .Car_img {
        width: 70px;
        margin: 0 10px;
      }

      //商品信息
      .Car_title {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        span {
          font-size: 12px;
          color: #636363;
        }
        .price {
          align-items: center;
          justify-content: space-between;
          display: flex;
          flex-direction: row;
          // 单价
          h5 {
            font-size: 12px;
            color: #636363;
          }
          p {
            font-size: 10px;
            background-color: red;
            padding: 7px;
            border-radius: 3px;
            color: #fff;
          }
          /deep/.van_ste > button {
            height: 22px;
            width: 22px;
          }
          /deep/.van_ste > input {
            height: 22px;
            background-color: transparent;
          }
        }
      }
    }
  }
}
</style>
